@import "../common/rem";
@import "../less/style";
@import "../less/util";
@import "../common/mixins";

#SelectDeptList {
    .main {
        top: 0;
        .px2rem(bottom, 120);
    }
    .content {
        .px2rem(margin-top, 88);
    }
    .select-dept-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        .px2rem(height, 120);
        .px2rem(line-height, 120);
        background-color: #FFF;
        .dept-submit {
            position: absolute;
            .px2rem(right, 30);
            .px2rem(top, 24);
            background-color: #FA6771;
            color: #FFF;
            text-align: center;
            .px2px(font-size, 30);
            .px2rem(width, 170);
            .px2rem(height, 70);
            .px2rem(line-height, 70);
            border-radius: 10px;
        }
        .dept-selected {
            position: absolute;
            .px2rem(left, 30);
            .px2rem(top, 24);
            color: #333D4D;
            background-color: #F5F8FA;
            text-align: center;
            .px2px(font-size, 30);
            .px2rem(padding-left, 18);
            .px2rem(padding-right, 18);
            .px2rem(height, 70);
            .px2rem(line-height, 70);
            border-radius: 10px;
            border: 1px solid #E8EDEF;
        }
    }
    .dept-lists {
        color: #292F33;
        background-color: #FFF;
        padding: 0;
        margin: 0;
        .px2px(font-size, 32);
        .icon-right:before {
            position: absolute;
            color: #CBCCD7;
            .px2rem(right, 30);
        }
        li {
            position: relative;
            list-style: none;
            .px2rem(height, 110);
            .px2rem(line-height, 110);
            .select-circle {
                position: absolute;
                .px2rem(top, 2);
                .px2rem(padding-right, 30);
                .px2rem(height, 110);
                .px2rem(line-height, 110);
                .px2rem(padding-left, 30);
            }
            .icon-circl {
                color: #DDD;
            }
            .icon-correct {
                color: #FA6771;
            }
            .dept-name {
                position: relative;
                .px2rem(left, 90);
                .px2rem(height, 110);
                .px2rem(line-height, 110);
                .my-dept {
                    position: relative;
                    .px2rem(bottom, 2);
                    .px2px(font-size, 20);
                    .px2rem(padding-left, 8);
                    .px2rem(padding-right, 8);
                    .px2rem(padding-bottom, 10);
                    .px2rem(padding-top, 6);
                    .px2rem(margin-left, 10);
                    color: #63C4FF;
                    border: 1px solid #86D5FD;
                    border-radius: 5px;
                    background-color: #EEFBFF;
                }
            }
            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                .px2rem(left, 85);
                right: 0;
                width: auto;
                height: 1px;
                background: #ddd;
            }
        }
        li:last-child {
            &::after {
                content: none;
            }
        }
    }
}
